<template>
    <a-drawer
      title="查看用户信息"
      placement="right"
      width="500"
      v-model:visible="visible"
    >
      <template v-if="userinfo.name">
        <div class="userinfo">
          <div class="userinfo__img">
            <img :src="userinfo.avatar_url" />
          </div>
          <p class="userinfo__wxname">{{ userinfo.nick_name }}</p>
          <div class="userinfo__items">
            <div class="userinfo__items__item" :title="userinfo.name">
              <span style="font-weight: bold">姓名：</span>{{ userinfo.name }}
            </div>
            <div class="userinfo__items__item" :title="userinfo.class_name">
              <span style="font-weight: bold">班级：</span
              >{{ userinfo.class_name }}
            </div>
            <div class="userinfo__items__item" :title="userinfo.phone">
              <span style="font-weight: bold">手机号：</span>{{ userinfo.phone }}
            </div>
            <div class="userinfo__items__item" :title="userinfo.paper_count.toString()">
              <span style="font-weight: bold">填写问卷数量：</span
              >{{ userinfo.paper_count }}
            </div>
          </div>
        </div>
        <!-- 有空再加个预览简历 -->
        <!-- <div class="resume">
          <p class="resume__check">预览简历</p>
        </div> -->
      </template>
    </a-drawer>
  </template>
  <script lang="ts">
  import { defineComponent, onUpdated, ref, Ref } from "vue";
  import { get } from "../utils/request/request";
  
  interface UserInfo {
    id: number | undefined;
    nick_name: string;
    name: string;
    class_name: string;
    phone: string;
    app_id: string;
    avatar_url: string;
    resume_url: string;
    paper_count: number;
  }
  
  const token: string = localStorage.getItem("token") as string;
  
  const userinfo: Ref<UserInfo> = ref({
    id: undefined, //问卷id
    nick_name: "", //微信昵称
    name: "", //姓名
    class_name: "", //班级
    phone: "", //手机号
    app_id: "", //小程序用户id
    avatar_url: "", //头像url
    resume_url: "", //简历链接
    paper_count: 0, //问卷数
  });
  
  // 抽屉逻辑
  const useDrawerEffect = () => {
    const visible = ref<boolean>(false);
    const showDrawer = () => {
      visible.value = true;
    };
    return { visible, showDrawer };
  };
  
  // 网络请求
  const useHttpEffect = () => {
    const getUserDetail = async (id: number) => {
      const res: any = await get(`/admin/api/v1/user/${id}`, token);
      console.log(res);
      if (res?.status_code === 0) {
        userinfo.value = res?.data;
      }
    };
    return { getUserDetail };
  };
  
  export default defineComponent({
    props: ["app_user_id"],
    setup(props) {
      const { visible, showDrawer } = useDrawerEffect();
      const { getUserDetail } = useHttpEffect();
  
      onUpdated(() => {
        if (props.app_user_id) {
          getUserDetail(props.app_user_id);
        }
      });
  
      return {
        userinfo,
        visible,
        showDrawer,
      };
    },
  });
  </script>
  
  <style lang="less" scoped>
  .userinfo {
    font-size: 18px;
    &__img {
      text-align: center;
      img {
        border-radius: 50%;
      }
    }
    &__wxname {
      font-weight: bold;
      text-align: center;
      font-size: 24px;
    }
    &__items {
      padding: 5px;
      display: flex;
      width: 100%;
      flex-flow: row wrap;
      align-content: flex-start;
      &__item {
        padding: 3px 0;
        box-sizing: border-box;
        flex: 0 0 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  </style>
  
  